<style lang='scss' scoped>
@import "@/assets/css/variable";
.apply-list {
  padding: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    // border-bottom: 1px solid $border-c;
    background-color: white;
    border-radius: 8px;
    padding: 0 12px;
    margin-bottom: 12px;
    .title {
      padding-top: 1.2rem;
      // padding-left: 1.7rem;
      padding-right: 1.7rem;
    }
    .van-cell {
      padding: 15px 0;
    }
  }
  .list-box {
    background-color: white;
    border-radius: 8px;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.7rem;
      border-bottom: 1px solid $border-c;
      .flex{
        flex: 0 0 6rem;
      }
    }
  }
}
</style>
<template>
  <div class="apply-list">
    <BarNav></BarNav>
    <div class="header-box">
      <div class="title fs-18 t-bold">{{activityItem.title}}</div>
      <div>
        <van-cell
          :title="`当前共有${listNum}条记录`"
        />
      </div>
    </div>
    <div class="list-box" v-if="list && list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span class="flex">{{ item.name }}</span>
        <a :href="`tel:${item.mobile}`">{{ item.mobile }}</a>
        <span>{{ item.statusname }}</span>
        <span v-if="item.prizename">{{item.prizename}}<i>({{item.mobile != '---' ? '发货' : '自提'}})</i></span>
      </div>
    </div>
    <!-- <div class="no-data padding-all" v-else>暂无报名信息</div> -->
    <van-empty v-else description="暂无数据" />
    <van-action-sheet
      v-model="showAction"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @close = "upDown = 'down'"
    />
  </div>
</template>

<script>
import { Cell, ActionSheet, Empty } from "vant";
import BarNav from "@/components/BarNav";
export default {
  components: {
    [Cell.name]: Cell,
    [ActionSheet.name]: ActionSheet,
    [Empty.name]: Empty,
    BarNav
  },
  data() {
    return {
      showAction: false,
      upDown: "down",
      list: [],
      listNum: 0,
      actions: [{ name: "全部" }, { name: "未付款" }, { name: "已付款" }],
      status: '',
      statusName: '全部',
      listOld:'',
	  activityItem:''
    };
  },
  mounted() {
    if (process.env.NODE_ENV == 'production') { //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到"
    }else{
      this.openid = this.$store.state.openid
    }
	this.activityItem = this.$store.state.activityItem
	if(!this.activityItem){
		this.$router.replace('/manage');
		return;
	}
    // this.list = JSON.parse(this.$store.state.activityItem.apply_list);
    this.getOrderPage()
  },
  methods: {
    getOrderPage() {
      let params = {
        activity_id: this.$store.state.activityItem.id,
        status: this.status,
		pageNo:1,
		pageSize: 1000
      };
      this.$request.getOrderPage(params).then((res) => {
        let list = res.data.data;
        list = list.map(res => {
			if(res.val){
				res.name = res.val[0].name
				res.mobile = res.val[0].mobile
				return res
			}else{
				res.name = res.fans_name
				res.mobile = '---'
				return res
			}
        })
        this.list = list
        console.log(list , 'liat');
        this.listOld = list;
		    this.listNum = this.list.length
      });
    },
    onSelect(item) {
      console.log("onselct",item)
      if (item.name == "全部") {
        this.status = '';
        this.list = this.listOld
      } else if (item.name == "未付款") {
        this.status = 1;
        this.list = this.listOld.filter(res=>res.status==1)
      } else if (item.name == "已报名") {
        this.status = 2;
        this.list = this.listOld.filter(res=>res.status==2)
      }
      this.statusName = item.name
      this.upDown = 'down'
    },
    closePop() {
      this.upDown = "down";
    },
    isPopClick() {
      this.showAction = true;
      this.upDown = "up";
    },
  },
};
</script>